<template>
  <div>
    <div v-for="user in userArray" :key="user.id">
      <div style="position: absolute; margin-left: 35%; margin-top: 10px">
        <font style="font-size: 20px"
          ><router-link :to="'userDetail?id=' + user.id" target="_self">{{
            user.nickname
          }}</router-link></font
        >
      </div>
      <div style="position: absolute; margin-left: 35%; margin-top: 45px">
        {{ user.introduction }}
      </div>
      <div v-if="userArray.length" style="margin-right: 25%" class="block">
        <el-avatar
          :size="70"
          :src="'http://localhost:8081/blog' + user.img"
        ></el-avatar>
      </div>
      <el-divider></el-divider>
    </div>
  </div>
</template>

<script>
import bus from "@/eventBus.js";

export default {
  data() {
    return { userArray: [] };
  },
  created() {
    bus.$on("share", (val) => {
      this.userArray = val;
    });
  },
  methods: {},
};
</script>

<style scoped>
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 10px 0;
}
</style>